<template>
    <!-- 订单详情对话框 -->
    <el-dialog title="商品大类图片更换" v-model="imageDialogVisible" :visible.sync="imageDialogVisible" width="30%" center
        @close="handleClose">
        <!-- action 地址要修改 -->
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
            style="text-align: center;" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">确认更换</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'imageDialog',
    data() {
        return {
            form: {
                id: -1,
                image: ''
            },
            imageUrl: ''
        }
    },
    props: ['imageDialogVisible', 'id', 'imageDialogValue'],
    watch: {
        imageDialogValue(val) {
            if (val) {
                this.form = val;
                this.imageUrl = form.image;
            }
        },
        // 立即执行 图片回显
        deep: true,
        immediate: true
    },
    mounted() {

    },
    methods: {
        handleClose() {
            this.$emit('click');
        },
        // 上传图片相关的回调
        // 图片上传成功
        handleAvatarSuccess(res, file) {
            // res 上传成功之后返回给前端的数据
            this.imageUrl = res.data;
        },
        // 图片上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 图片确认提交 修改的商品大类数据
        async handleConfirm() {
            let result = await this.$API.categoty.reqSaveFormData(this.form)
            let data = result.data;
            if (data.code == 0) {
                // 表示提交成功
                this.$message({
                    type: 'success',
                    message: '执行成功'
                })
                // 执行成功之后清空表单数据
                this.$refs.formRef.resetFields();
                // 子组件调用父组件中的方法 重新刷新数据
                this.$emit('initBigTypeList');
                this.handleClose();
            } else {
                this.$message({
                    type: 'success',
                    message: `${data.msg}`
                })
            }
        },
    }
}

</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
